<template>
  <div>
    <el-form ref="formData" :model="formData" :rules="rules" label-width="120px" class="demo-formData">
      <el-form-item label="名称" prop="permissionName">
        <el-input v-model="formData.permissionName" />
      </el-form-item>
      <el-form-item label="类型" prop="permissionType">
        <el-radio-group v-model="formData.permissionType">
          <el-radio :label="4">系统</el-radio>
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="2">接口</el-radio>
          <el-radio :label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示" prop="isShow">
        <el-radio-group v-model="formData.isShow">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级">
        <el-row :gutter="10">
          <el-col :span="21">
            <el-input v-model="formData.pname" disabled />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-zoom-in" circle @click="btn_clickSelect" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="路径" prop="rutePath"> <el-input v-model="formData.rutePath" /> </el-form-item>
      <el-form-item label="图标" prop="icon" style="position: relative;">
        <el-input v-model="formData.icon" @focus="getIcon" />
        <div v-if="dialogVisible" class="isonContent">
          <svg-icon v-for="(item,index) in iconList" :key="index" :icon="item" style="font-size:20px;margin:10px;cursor: pointer;" :icon-class="item" @click="setIcon(item)" />
        </div>
      </el-form-item>
      <el-form-item label="前端组件" prop="component"> <el-input v-model="formData.component" /> </el-form-item>
      <el-form-item label="权限标识" prop="permissionKey"> <el-input v-model="formData.permissionKey" /> </el-form-item>
      <el-form-item label="排序">
        <el-input-number
          v-model="formData.sort"
          style="width: 100px"
          controls-position="right"
          :min="1"
        />
      </el-form-item>
      <el-form-item label="是否设置为首页">
          <el-radio v-model="formData.isHomepage" :label="label1">是</el-radio>
          <el-radio v-model="formData.isHomepage" :label="label2">否</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="submitForm('formData')">
          <i class="el-icon-plus" />
          提交</el-button>
        <el-button size="medium" @click="resetForm">
          <i class="el-icon-refresh" />
          重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose">
      <svg-icon @click="setIcon(item)" v-for="(item,index) in iconList" :key="index" :icon="item" style="font-size:20px;margin:10px;cursor: pointer;" :icon-class="item"/>
    </el-dialog> -->
    <selectModel :show="selectModelShow" @closed="onSelectModalClosed" />
  </div>
</template>
<style>
.isonContent{
    position: absolute;
    top: 33px;
    left: 0;
    background: #f2f5f8;
    padding: 10px;
    border:2px solid #f2f5f8;
    height: 200px;
    overflow-x: scroll;
    width: 100%;
    z-index: 2;
    border-radius: 0 0 10px 10px;
}
</style>

<script>
import selectModel from './selectModel'
import iconList from './icon.json'
import { savePermission } from '@/api/home_'
import htmixin from '@/mixins/htmixin.js'
export default {
  name: 'Dfgd',
  components: { selectModel },
  mixins: [htmixin],
  props: {
    nodeData: { type: Object, default: null }
  },
  data() {
    return {
      label2:0,
      label1:1,
      iconList: iconList,
      selectModelShow: false, // 父级选择
      dialogVisible: false,
      formData: {
        rutePath: '',
        permissionName: '',
        permissionKey: '',
        permissionType: 4,
        icon: '',
        component: '',
        parentId: null,
        isShow: 0,
        pname: '无',
        sort: 1,
        isHomepage:0

      },
      rules: {
        rutePath: [{ required: true, message: '请输入访问路径', trigger: 'blur' }],
        permissionName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        permissionType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        permissionKey: [{ required: true, message: '请输入权限标识', trigger: 'blur' }]
      }
    }
  },
  watch: {
    nodeData: {
      handler(v) {
        if (Object.keys(v).length > 0) {
          v.parentId == null || v.parentId == 0 ? (v.pname = '无') : ''
          this.formData = v
        } else {
          this.formData = this.$options.data().formData
        }
      }
      // deep: true,
    }
  },
  methods: {
    setIcon(v) {
      this.formData.icon = v
      this.dialogVisible = false
    },
    handleClose() { this.dialogVisible = false },
    getIcon() {
      this.dialogVisible = true
    },
    // 选择父级
    btn_clickSelect() {
      this.selectModelShow = true
    },
    // 弹出对话框关闭事件处理
    onSelectModalClosed(v) {
      this.selectModelShow = false
      if (v) {
        this.formData.pname = v.permissionName
        this.formData.parentId = v.id
      } else {
        this.formData.pname = '无'
        this.formData.parentId = null
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.formData['parentId'] = this.formData['pname'] == '无' ? 0 : this.formData['parentId']

          if (this.formData.hasOwnProperty('id')) {
            const newFormData = {
              rutePath: this.formData['rutePath'],
              permissionName: this.formData['permissionName'],
              permissionKey: this.formData['permissionKey'],
              permissionType: this.formData['permissionType'],
              icon: this.formData['icon'],
              component: this.formData['component'],
              parentId: this.formData['parentId'],
              isShow: this.formData['isShow'],
              sort: this.formData['sort'],
              id: this.formData['id'],
              isHomepage:this.formData['isHomepage']
            }
            this.formData = JSON.parse(JSON.stringify(newFormData))
          } else {
            delete this.formData.pname
          }

          savePermission(this.formData).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg)
              this.$emit('refresh')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.formData = this.$options.data().formData
    }
  }
}
</script>
